<template>
  <div class="scroll-container">
    <section id="section1" class="scroll-contentt">
      <div class="inner-scroll-content">
        <MyCard1 />
      </div>
    </section>
    <section id="section2" class="scroll-content">
      <div class="inner-scroll-content">
        <MyCard2 />
      </div>
    </section>
    <section id="section3" class="scroll-content" ref="section3">
      <div class="inner-scroll-content">
        <MyCard3 ref="myCard3" />
      </div>
    </section>
    <section id="section4" class="scroll-content">
      <div class="inner-scroll-content">
        <MyCard4 />
      </div>
    </section>
    <section id="section5" class="scroll-content">
      <div class="inner-scroll-content">
        <MyCard5 />
      </div>
    </section>
    <section id="section6" class="scroll-content">
      <div class="inner-scroll-content">
        <MyCard6 />
      </div>
    </section>
    <section id="section7" class="scroll-content">
      <div class="inner-scroll-content">
        <MyCard7 />
      </div>
    </section>
    <section id="section8" class="scroll-content-large">
      <div class="inner-scroll-content">
        <MyCard8 />
      </div>
      <div class="inner-scroll-content1">
        <MyCard9 />
      </div>
    </section>
  </div>
</template>

<script>
import MyCard1 from '../../components/AboutUs/MyCard1.vue';
import MyCard2 from '../../components/AboutUs/MyCard2.vue';
import MyCard3 from '../../components/AboutUs/MyCard3.vue';
import MyCard4 from '../../components/AboutUs/MyCard4.vue';
import MyCard5 from '../../components/AboutUs/MyCard5.vue';
import MyCard6 from '../../components/AboutUs/MyCard6.vue';
import MyCard7 from '../../components/AboutUs/MyCard7.vue';
import MyCard8 from '../../components/AboutUs/MyCard8.vue';
import MyCard9 from '../../components/AboutUs/MyCard9.vue';

export default {
  name: 'AboutUsView',
  components: {
    MyCard1,
    MyCard2,
    MyCard3,
    MyCard4,
    MyCard5,
    MyCard6,
    MyCard7,
    MyCard8,
    MyCard9
  },
  mounted() {
    this.$nextTick(() => {
      const observer = new IntersectionObserver(
          (entries) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');

                // 启动数字滚动动画
                if (this.$refs.myCard3) {
                  this.$refs.myCard3.startCountUp();
                }
                // 启动图表动画
                if (this.$refs.pieChart1) {
                  this.$refs.pieChart1.startAnimation(); // 启动图表1的动画
                }
                if (this.$refs.pieChart2) {
                  this.$refs.pieChart2.startAnimation(); // 启动图表2的动画
                }
              } else {
                entry.target.classList.remove('fade-in');
              }
            });
          },
          { threshold: 0.3 }
      );

      if (this.$refs.section3) {
         observer.observe(this.$refs.section3);
      }
      document.querySelectorAll('.inner-scroll-content').forEach((element) => {
        observer.observe(element);
      });
    });

  }
}
</script>

<style scoped>
body, html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

.scroll-container {
  position: relative;
  height: auto;
  perspective: 1px;
}

.scroll-content {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  border-radius: 2%;
  overflow: hidden; /* 防止内部内容溢出 */
}

.scroll-contentt {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  border-radius: 2%;
  overflow: hidden; /* 防止内部内容溢出 */
}
.scroll-content-large {
  position: sticky;
  top: 0;
  height: 127vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  border-radius: 20px 20px 0 0;
  overflow-x: hidden;
}

.inner-scroll-content {
  height: 100%;
  width: 100%;
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0; /* 初始隐藏 */
  transform: translateY(20px); /* 初始位置稍微下移 */
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.inner-scroll-content.fade-in {
  opacity: 1; /* 显示 */
  transform: translateY(0); /* 显示到正常位置 */
  animation: floatUp 1s ease-in-out forwards; /* 更长的动画时间和旋转效果 */
}

/* 动画定义 */
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 在 fade-in 的基础上添加缓慢浮动效果 */
.inner-scroll-content.fade-in {
  animation: floatUp 1.5s ease-in-out forwards;
}

.inner-scroll-content1 {
  height: auto;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #ddd;
}

/* 各个 section 的背景颜色 */
#section1 { z-index: 1; background-color: #e6f4ff; }
#section2 { z-index: 2; background-color: #e6f4ff; }
#section3 { z-index: 3; background-color: #e6f4ff; }
#section4 { z-index: 4; background-color: #e6f4ff; }
#section5 { z-index: 5; background-color: #e6f4ff; }
#section6 { z-index: 6; background-color: #e6f4ff; }
#section7 { z-index: 7; background-color: #e6f4ff; }
#section8 { z-index: 8; background-color: #e6f4ff; }

h1 { font-size: 2em; margin-bottom: 20px; }
p { font-size: 1.2em; margin-bottom: 20px; }
</style>
